<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增班制打卡时间')"/>
    <style>

        .mainBox {
            width: 90%;
            margin-top: 20px;
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 50px;
            overflow: auto;
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 50px;
            line-height: 50px;
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
        }

        .button-container {
            position: absolute;
            right: 15px;
        }
        body{
            background-color: #fff;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="unitId"/>
                    <input type="hidden" name="unitName"/>
                    <ul data-id="0" id="selectDept"></ul>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班制类型</label>
                <div class="layui-input-inline">
                    <select id="scheType" name="scheType"  lay-filter="scheType" >
                        <option value=""></option>
                        <option value="白班">白班</option>
                        <option value="夜班">夜班</option>
                        <option value="二一班">二一班</option>
                        <option value="二二班">二二班</option>
                        <option value="三一班">三一班</option>
                        <option value="三二班">三二班</option>
                        <option value="三三班">三三班</option>
                        <option value="四二班">四二班</option>
                        <option value="四三班">四三班</option>
                        <option value="不定时">不定时</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班制名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="scheName" placeholder="请输入班制名称"
                           class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">指定机构</label>
                <div class="layui-input-inline">
                    <input type="text" name="limitUnitIds" placeholder="请输入指定使用的机构"
                           class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item" id="scheTemp">

            </div>
            <input type="hidden" name="params">

        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="scheSign-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
</body>
<th:block th:include="include :: footer"/>
<script type="text/html" id="dkTemp">
    <fieldset class="layui-elem-field qd">
        <legend>打卡</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="startTime" name="startTime" placeholder="请输入打卡开始时间"
                           class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="endTime" name="endTime" placeholder="请输入打卡结束时间"
                           class="layui-input" />
                </div>
            </div>

            <input type="hidden" name="timeLimitType" value="{timeLimitType}">
        </div>
    </fieldset>
</script>
<script type="text/html" id="scheStageTemp">
    <fieldset class="layui-elem-field scheStage">
        <legend>{scheStage}</legend>
        <div class="layui-field-box">

            <div class="layui-form-item">
                <label class="layui-form-label">班段名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="scheStage" placeholder="请输入班段名称" value="{scheStage}"
                           class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">班段排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="scheSort" placeholder="请输入班段排序" value="{sort}"
                           class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item" >
                <i class="addTimeBtn layui-btn" >添加打卡时间段</i>
            </div>
            <div class="signTime">
                <fieldset class="layui-elem-field qd">
                    <legend>签到</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <label class="layui-form-label">签到开始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" id="startTime" name="startTime" placeholder="请输入打卡开始时间"
                                       class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">签到结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" id="endTime" name="endTime" placeholder="请输入打卡结束时间"
                                       class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">迟到时间</label>
                            <div class="layui-input-inline">
                                <input type="hidden" name="timeLimitType" value="0">
                                <input type="text" id="timeLimit" name="timeLimit" placeholder="请输入迟到时间"
                                       class="layui-input" />
                            </div>
                        </div>
                    </div>
                </fieldset>
                <div class="dk">

                </div>
                <fieldset class="layui-elem-field qt">
                    <legend>签退</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <label class="layui-form-label">签退开始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" id="startTime" name="startTime" placeholder="请输入打卡开始时间"
                                       class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">签退结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" id="endTime" name="endTime" placeholder="请输入打卡结束时间"
                                       class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">早退时间</label>
                            <div class="layui-input-inline">
                                <input type="hidden" name="timeLimitType" value="1">

                                <input type="text" id="timeLimit" name="timeLimit" placeholder="请输入早退时间"
                                       class="layui-input" />
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>


        </div>
    </fieldset>
</script>
<script th:inline="javascript">

    let reg = new RegExp("{(\\w+)}", "ig");
    let data1 = {scheStage: "白班", sort: "1"};
    let data2 = {scheStage: "夜班", sort: "2"};
    let data3 = {scheStage: "大夜班", sort: "3"};
    layui.use(['form', 'jquery', 'laydate', 'dtree'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        let dtree = layui.dtree;

        let prefix = pName + "/kq/scheSign/";

        let initValue = common.currentUser().unitId;
        deptUtil.initUnitSelect("selectDept", "unitId","unitName", initValue, function () {

        }, '考勤')

        form.on('select(scheType)', function (data) {
            let scheType = $('#scheType').val();
            $('#scheName').empty();
            $('#scheTemp').empty();
            if(scheType == "白班" || scheType == "三一班" || scheType == "二一班"){
                $('#scheTemp').append($("#scheStageTemp").html().replace(reg, function (text, key) {
                    return data1[key];
                }));
            } else if(scheType == "夜班"){
                $('#scheTemp').append($("#scheStageTemp").html().replace(reg, function (text, key) {
                    return {scheStage: "夜班", sort: "1"}[key];
                }));
            } else if(scheType == "三二班" || scheType == "二二班" || scheType == "四二班"){
                $('#scheTemp').append($("#scheStageTemp").html().replace(reg, function (text, key) {
                    return data1[key];
                }));
                $('#scheTemp').append($("#scheStageTemp").html().replace(reg, function (text, key) {
                    return data2[key];
                }));
            } else if(scheType == "四三班" || scheType == "三三班"){
                $('#scheTemp').append($("#scheStageTemp").html().replace(reg, function (text, key) {
                    return data1[key];
                }));
                $('#scheTemp').append($("#scheStageTemp").html().replace(reg, function (text, key) {
                    return data2[key];
                }));
                $('#scheTemp').append($("#scheStageTemp").html().replace(reg, function (text, key) {
                    return data3[key];
                }));
            }

            $('.addTimeBtn').on('click', function () {
                console.log($(this).parent().parent().find('.signTime .dk').append($("#dkTemp").html().replace(reg, function (text, key) {
                    return {timeLimitType: 3}[key];
                })));
            });
            laydate.render({
                elem: '#startTime',
                trigger: 'click',
                type: 'time', //设置日期类型
                format: 'HH:mm', //设置日期格式
                // showBottom: false, //关闭底部框 去掉取消、确定、清空按钮
                done: function (value, date) {
                    console.log(value)
                }

            });
            laydate.render({
                elem: '#endTime',
                trigger: 'click',
                type: 'time', //设置日期类型
                format: 'HH:mm', //设置日期格式
                // showBottom: false, //关闭底部框 去掉取消、确定、清空按钮
                done: function (value, date) {
                    console.log(value)
                }

            });
            laydate.render({
                elem: '#timeLimit',
                trigger: 'click',
                type: 'time', //设置日期类型
                format: 'HH:mm', //设置日期格式
                // showBottom: false, //关闭底部框 去掉取消、确定、清空按钮
                done: function (value, date) {
                    console.log(value)
                }

            });

        });


        form.on('submit(scheSign-save)', function (data) {
            let loading = layer.load();
            let field = data.field;
            for (var key in field) {
                var type = $(data.form).find("input[name='" + key + "']").attr("type");
                if (type == "checkbox") {
                    var value = "";
                    $(data.form).find("input[name='" + key + "']:checked").each(function () {
                        value += $(this).val() + ",";
                    })
                    if (value != "") {
                        value = value.substr(0, value.length - 1);
                        data.field[key] = value;
                    }

                }

            }
            var phaseArray = jQuery(".scheStage");
            var plen = phaseArray.length;
            var allPhaseName = "";
            var param = new Array();
            if (plen > 0) {
                for (var i = 0; i < plen; i++) {
                    var banfenduan = jQuery(phaseArray[i]).find("input[name='scheStage']").val();
                    var scheSort = jQuery(phaseArray[i]).find("input[name='scheSort']").val();
                    if("" == banfenduan || null == banfenduan || undefined == banfenduan){
                        layer.alert("请输入班制分段名称");
                        layer.close(loading);
                        return false;
                    } else if (allPhaseName.indexOf(banfenduan + ',') != -1) {
                        layer.alert("班制分段名称重复");
                        layer.close(loading);
                        return false;
                    }
                    var bytesCount=0;
                    for (var w = 0; w < banfenduan.length; w++){
                        var c = banfenduan.charAt(w);
                        if (/^[\u0000-\u00ff]$/.test(c)) //匹配双字节
                        {
                            bytesCount += 1;
                        }
                        else
                        {
                            bytesCount += 3;
                        }
                    }
                    if (banfenduan && bytesCount > 50) {
                        layer.alert("班制分段最多支持50字符或16个汉字，当前内容过长，请修正");
                        layer.close(loading);
                        return false;
                    }
                    allPhaseName += banfenduan + ',';
                    var signArray = jQuery(phaseArray[i]).find(".signTime fieldset");
                    var sLen = signArray.length;
                    if (sLen > 1) {
                        for (var j = 0; j < sLen; j++) {
                            var start = jQuery(signArray[j]).find("input[name='startTime']").val();
                            if("" == start || null == start || undefined == start){
                                layer.alert("请添加打卡开始时间");
                                layer.close(loading);
                                return false;
                            }
                            var end = jQuery(signArray[j]).find("input[name='endTime']").val();
                            if("" == end || null == end || undefined == end){
                                layer.alert("请添加打卡结束时间");
                                layer.close(loading);
                                return false;
                            }
                            var timeLimitType = jQuery(signArray[j]).find("input[name='timeLimitType']").val();

                            var data = {};
                            var obj = jQuery(signArray[j]).find("input[name='timeLimit']");
                            var timelimit = "";
                            if (obj.length  == 1) {
                                timelimit = obj.val();
                                if("" == timelimit || null == timelimit || undefined == timelimit){
                                    layer.alert("请添加迟到早退时间范围");
                                    layer.close(loading);
                                    return false;
                                }
                            }

                            data["unitId"] = field["unitId"];
                            data["unitName"] = field["unitName"];
                            data["scheType"] = field["scheType"];
                            data["scheName"] = field["scheName"];
                            data["limitUnitIds"] = field["limitUnitIds"];


                            data["scheStage"] = banfenduan;
                            data["scheSort"] = scheSort;
                            data["scheSort"] = i+1;
                            data["startTime"] = start;
                            data["endTime"] = end;
                            data["timeLimit"] = timelimit;
                            data["timeLimitType"] = timeLimitType;
                            data["timeSort"] = j+1;
                            param.push(data);
                        }
                    } else {
                        layer.alert("至少要有签到和签退时间设定");
                        layer.close(loading);
                        return false;
                    }
                }
            } else {
                layer.alert("请添加班制分段信息");
                layer.close(loading);
                return false;
            }
            $.ajax({
                url: prefix + 'save',
                data: JSON.stringify(param),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("scheSign-table");
                        });
                    } else {
                        layer.alert(result.msg, {icon: 2});
                    }
                },
                error: function() {
                    layer.alert("服务报错", {icon: 2});
                }
            })
            return false;
        });
    });
</script>
</html>